:host {
  .td-search-input {
    // [layout]
    box-sizing: border-box;
    display: flex;
    // [layout="row"]
    flex-direction: row;
    // [layout-align="end center"]
    align-items: center;
    align-content: center;
    max-width: 100%;
    justify-content: flex-end;

    .td-search-input-field {
      flex: 1;
    }

    ::ng-deep {
      .mat-mdc-text-field-wrapper.mdc-text-field {
        padding-right: 48px;
      }
    }

    ::ng-deep mat-form-field {
      .mat-mdc-form-field-subscript-wrapper {
        display: none;
      }

      &.mat-form-field-appearance-outline {
        .mat-form-field-wrapper {
          padding-bottom: 0;
        }
      }

      &.mat-form-field-appearance-fill {
        .mat-form-field-wrapper {
          padding-bottom: 0;

          .mat-form-field-flex {
            height: 52px;
          }

          .mat-form-field-underline {
            bottom: 0;
          }
        }
      }

      &.mat-form-field-appearance-standard {
        .mat-form-field-wrapper {
          padding-bottom: 0;

          .mat-form-field-infix {
            bottom: 0.4em;
          }

          .mat-form-field-underline {
            bottom: 0;
          }
        }
      }

      .mat-input-element {
        caret-color: currentColor;
      }

      &.mat-hide-underline .mat-form-field-underline {
        display: none;
      }
    }

    .td-search-input-clear {
      margin-left: -48px;
      margin-right: 0;
      overflow: hidden;
    }
  }
}

